<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
    <style>
        .btn-info {
            background-color: #17a2b8;
            color: #fff;
        }

        .btn-info.clicked {
            background-color: #28a745; /* 点击后的绿色 */
            color: #fff;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 右侧内容区域 -->
        <!-- 页面标题 -->
        <div class="mb-4">
            <h2>统计管理</h2>
        </div>

        <!-- 筛选框和按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center">
                <label for="statDate" class="form-label me-2">统计时间：</label>
                <input type="date" id="statDate" class="form-control" style="width: auto;">
                <button class="btn btn-primary ms-3" id="filterButton">筛选</button>
            </div>
            <button class="btn btn-success" id="startStatButton">开始统计</button>
        </div>

        <!-- 当天统计数据展示表格 -->
        <div id="tableContainerToday">
            <h5 class="mb-3">当天统计数据</h5>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>文件路径</th>
                    <th>当天下载数据量</th>
                    <th>最近修改时间</th>
                    <th>统计时间</th>
                </tr>
                </thead>
                <tbody id="summaryTableToday">
                <!-- 数据行动态加载 -->
                </tbody>
            </table>
        </div>

        <!--最近统计数据数据展示表格 -->
        <div id="tableContainer">
            <h5 class="mb-3">最近统计数据</h5>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>文件路径</th>
                    <th>当天数据</th>
                    <th>昨天数据</th>
                    <th>差异</th>
                    <th>最近修改时间</th>
                    <th>当天统计时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="summaryTable">
                <!-- 数据行动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 明细数据弹框 -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 90%; height: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">明细数据</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-striped" id="detailsTable">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>文件名</th>
                        <th>文件大小</th>
                        <th>文件类型</th>
                        <th>修改时间</th>
                        <th>统计时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 数据行动态加载 -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载时获取最近统计数据并设置默认日期为当天
    $(document).ready(() => {
        const today = new Date().toISOString().split("T")[0];
        $("#statDate").val(today);
        fetchLatestFileStats();
        fetchTodayFileStats();

    });

    // 获取当天统计数据接口
    function fetchTodayFileStats() {
        $.ajax({
            url: '/filestat/getTodayFileStats',
            method: 'GET',
            success: function (data) {
                renderSummaryTableToday(data);
            },
            error: function (error) {
                console.error("Error fetching latest stats:", error);
            }
        });
    }

    // 获取最近统计数据接口
    function fetchLatestFileStats() {
        $.ajax({
            url: '/filestat/getLatestFileStatsByDirectory',
            method: 'GET',
            success: function (data) {
                renderSummaryTable(data);
            },
            error: function (error) {
                console.error("Error fetching latest stats:", error);
            }
        });
    }

    // 渲染数据展示表格，增加序号字段
    function renderSummaryTableToday(data) {
        const tableBody = $("#summaryTableToday");
        tableBody.empty();
        data.forEach((item, index) => {
            const row = `
            <tr>
                <td>${index + 1}</td>
                <td>${item.filePath}</td>
                <td>${item.currentCnt}</td>
                <td>${item.modifiedDate}</td>
                <td>${item.statTime}</td>
            </tr>`;
            tableBody.append(row);
        });
    }





    // 渲染数据展示表格，增加序号字段
    function renderSummaryTable(data) {
        const tableBody = $("#summaryTable");
        tableBody.empty();
        data.forEach((item, index) => {
            const safeFilePath = item.filePath.replace(/\\/g, '\\\\'); // 转义反斜杠
            const row = `
            <tr>
                <td>${index + 1}</td>
                <td>${item.filePath}</td>
                <td>${item.currentCnt}</td>
                <td>${item.yesterdayCnt}</td>
                <td>${item.difference}</td>
                <td>${item.modifiedDate}</td>
                <td>${item.statTime}</td>
                <td>
                 <button class="btn btn-info btn-sm" onclick="fetchDetails('${safeFilePath}', '${item.statTime}', this)">查看明细</button>

                </td>
            </tr>`;
            tableBody.append(row);
        });
    }

    // 根据 filePath 和 statDate 获取明细数据并在弹框中显示
    function fetchDetails(filePath, statDate, button) {
        // 切换按钮颜色
        $(".btn-info").removeClass("clicked"); // 移除其他按钮的点击状态
        $(button).addClass("clicked"); // 设置当前按钮为点击状态
        $.ajax({
            url: '/filestat/getFileStatsByDirectoryAndStatDate',
            method: 'GET',
            data: {filePath: filePath, statDate: statDate},
            success: function (data) {
                renderDetailsTable(data);
                $("#detailsModal").modal('show'); // 显示弹框
            },
            error: function (error) {
                console.error("Error fetching details:", error);
            }
        });
    }

    // 渲染明细表格，增加序号字段
    function renderDetailsTable(data) {
        const tableBody = $("#detailsTable tbody");
        tableBody.empty();
        data.forEach((item, index) => {
            const row = `
            <tr>
                <td>${index + 1}</td>
                <td>${item.fileName}</td>
                <td>${item.fileSize}</td>
                <td>${item.fileType}</td>
                <td>${item.modifiedDate}</td>
                <td>${item.statTime}</td>
            </tr>`;
            tableBody.append(row);
        });
    }

    // 筛选功能
    $("#filterButton").on("click", function () {
        const statDate = $("#statDate").val();
        if (!statDate) {
            alert("请选择统计时间！");
            return;
        }
        $.ajax({
            url: '/filestat/getLatestFileStatsByDirectory',
            method: 'GET',
            data: {statDate: statDate},
            success: function (data) {
                renderSummaryTable(data);
            },
            error: function (error) {
                console.error("Error filtering data:", error);
            }
        });

    });


    // 开始统计接口
    $("#startStatButton").on("click", function () {
        $.ajax({
            url: '/filestat/startStat',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({}),
            success: function (data) {
                alert(data);
                fetchLatestFileStats(); // 更新数据
                fetchTodayFileStats();
            },
            error: function (error) {
                console.error("Error starting statistics:", error);
            }
        });
    });
</script>
</body>
</html>
